<!-- 
*
* 文章推荐
*
-->
<template>
    <div class="recommend-container shadow-box">
        <div class="recommend-title flx-align-center">
            <svgIcon iconName="icon-wenzhang"></svgIcon>
            <span>推荐文章</span>
        </div>
        <div class="recommend-main" v-for="item in recommendArticle" :key="item.id" @click="goDetails(item)">
            <div class="content">
                <div class="content-image">
                    <div class="overlay"></div>
                    <el-image class="el-img" :src="item.articleCover" fit="cover"></el-image>
                </div>
                <p class="sle" :title="item.articleTitle">{{item.articleTitle}}</p>
            </div>
            <div class="recommend-time">
                <svgIcon iconName="icon-shijian"/>
                <span>{{ formatTimeToStr(item.createdAt) }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { articleStore } from '@/store/article/article';
const { getArticleInfo } = articleStore();
import svgIcon from '@/components/system/svgicon/svgicon.vue';
import { formatTimeToStr } from '@/utils/date-util';
import { ARTICLE_STATUS } from '@/constants/system/article';

// ========================= 实列挂载之前调用 =========================
// 数据初始化
onBeforeMount(() => {
    getRecommendArticle();
});

// ========================= 获取数据 =========================
let recommendArticle = ref([]);
async function getRecommendArticle() {
    let conditions = {
        params: {
            status: ARTICLE_STATUS.RELEASE_STATE.value,
            articleTitle:'',
            isRecommend: true
        },
        offset:1,
        limit:3 // 最多展示3条
    };
    const data = await getArticleInfo(conditions)
    recommendArticle.value = data.data;
};

// ========================= 路由操作 =========================
const router = useRouter(); // 路由
function goDetails(item) {
    router.push({
        path: '/article/detail',
        query: {
            id: item.id
        }
    })
};

</script>

<style lang="scss" scoped>
    @import './recommend-sidebar.scss';
    @import '@/theme/animations.scss';
</style>